<template>
  <div>
      <!--搜索框-->
      <div class="pd-10">
        <el-input style="width: 200px;" placeholder="请输入名称" prefix-icon="el-icon-search" v-model="username"
                  @input="getPageList" clearable></el-input>
        <el-input class="ml-5" style="width: 200px;" placeholder="请输入邮箱" prefix-icon="el-icon-message"
                  v-model="email" @input="getPageList" clearable></el-input>
        <el-input class="ml-5" style="width: 200px;" placeholder="请输入地址" prefix-icon="el-icon-position"
                  v-model="address" @input="getPageList" clearable></el-input>
        <el-button class="ml-5" type="primary" @click="getPageList">搜索</el-button>
        <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
      </div>

      <!--操作按钮-->
      <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定批量删除这些数据吗？"
            @confirm="delBatch"
        >
          <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>

        <el-upload action="http://localhost:8888/user/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
          <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
        </el-upload>
        <el-button type="primary" class="ml-5" @click="exports">导出 <i class="el-icon-top"></i></el-button>
      </div>
      <!--中心表格-->
      <el-table :data="tableData" border stripe :header-cell-style="headStyle"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="140">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="phone" label="手机">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <!--操作按钮-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="handleDel(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <!--            分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--新增表单对话框-->
      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="addForm" label-width="80px" size="small" ref="addForm">
          <el-form-item label="用户名">
            <el-input v-model="addForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="addForm.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="addForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="addForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="addForm.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
      currentPage: 1,
      pageSize: 5,//每页记录数
      total: 0,//总记录数
      tableData: [],//表格数据
      username: "",//查询条件1->用户名
      email: "",//查询条件2->邮箱
      address: "",//查询条件3->地址
      dialogFormVisible: false,//表单是否显示,默认不显示
      addForm: {
        username: "",
        nickname: "",
        email: "",
        phone: "",
        address: ""
      },//新增表单
      multipleSelection: [],//多选的数量
    }
  },
  created() {
    //分页
    this.getPageList()
  },
  methods:{
    //当前页为最后一页并且只有一条数据要删除时,跳转到上一页
    countPage() {
      //记录总页数
      //总页数=删除后的总记录数/分页条数
      let totalPage = this.multipleSelection?
          Math.ceil((this.total - this.multipleSelection.length) / this.pageSize) :Math.ceil((this.total - 1) / this.pageSize)

      //记录当前页码
      //记住删除最后一条数据时当前码是最后一页
      let pageNum = this.currentPage > totalPage ? totalPage : this.currentPage
      //重新记录当前页码
      this.currentPage=pageNum<1?1:pageNum
    },
    //触发多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //新增操作
    handleAdd() {
      this.dialogFormVisible = true//显示表单
      this.addForm = {}//清空表单数据
    },
    handleEdit(row) {
      this.addForm = row
      this.dialogFormVisible = true
    },
    //清空搜索框内容
    reset() {
      this.username = ""
      this.email = ""
      this.address = ""
      this.getPageList()
    },
    //保存表单信息
    save() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$axios.post("/user", this.addForm).then(res => {
            this.$refs.addForm.resetFields()//清空表单
            if (res.data.data) {
              this.$message({
                showClose: true,
                message: "保存成功",
                type: "success",
                onClose: () => {
                  this.getPageList()//刷新表格数据
                }
              })
              this.dialogFormVisible = false
            }
          })
        } else {
          this.$message("保存失败")
        }
      })
    },
    //删除信息
    handleDel(id) {
      this.$axios.delete("/user/" + id).then(res => {
        if (res.data.data) {
          //当前页为最后一页并且只有一条数据要删除时,跳转到上一页
          this.countPage()
          this.$message.success("删除成功")
          this.getPageList()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    //批量删除
    delBatch() {
      const ids = this.multipleSelection.map(item => item.id) // [{}, {}, {}] => [1,2,3]
      this.$axios.post("/user/batch/del", ids).then(res => {
        if (res.data.data) {
          this.countPage()
          this.$message.success("删除成功")
          this.getPageList()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    //分页
    getPageList() {
      // this.$axios.get(`http://localhost:8888/user/page?currentPage=${this.currentPage}&pageSize=${this.pageSize}&username=${this.username}&email=${this.email}&address=${this.address}`)
      // .then(res=>{
      //   // console.log(res)
      //   this.tableData=res.data.records
      //   this.total=res.data.total
      // })

      this.$axios.get("/user/page", {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          address: this.address
        }
      })
          .then(res => {
            // console.log(res)
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })

    },
    //当前页发生改变时currentPage的值发生改变
    handleCurrentChange(CurrentChange) {
      this.currentPage = CurrentChange
      //重新进行分页查询
      this.getPageList()
    },
    //每页数量发生改变时pageSize发生改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      //重新进行分页查询
      this.getPageList()
    },
    //设置表头样式
    headStyle() {
      return "background: #f8f8f9";
    },
    //导出
    exports(){
      window.open("http://localhost:8888/user/export")
    },
    //导入
    handleExcelImportSuccess(){
      this.$message.success("导入成功")
      this.getPageList()
    },
  }
}
</script>

<style>

</style>